import 'package:flutter/material.dart' hide DropdownButton, DropdownMenuItem, DropdownButtonHideUnderline;
import 'package:provider/provider.dart';

import 'drop_down.dart';

///
/// 封装TabBar的Name属性 与 TabBarView的View
///
class DropDownTabBarItem {
  String tabBarName;
  Widget tabBarWidget;

  DropDownTabBarItem({@required this.tabBarName, @required this.tabBarWidget});
}

///
/// 带下拉框的TabBar
///
class DropDownTabBar extends StatefulWidget {
  final List<DropDownTabBarItem> _tabBarList;

  DropDownTabBar(this._tabBarList);

  @override
  _DropDownTabBarState createState() => _DropDownTabBarState();
}

class _DropDownTabBarState extends State<DropDownTabBar> {
  ///通知DropDown调整当前index
  ValueNotifier<int> valueNotifier;

  ///监听当前TabBar的索引变化
  TabController tabController;

  @override
  void initState() {
    valueNotifier = ValueNotifier(0);
    super.initState();
  }

  @override
  void dispose() {
    valueNotifier.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    ///用于提供TabController对象
    return DefaultTabController(
      length: widget._tabBarList.length,
      initialIndex: valueNotifier.value,
      child: Builder(
        builder: (context) {
          if (tabController == null) {
            tabController = DefaultTabController.of(context);
            tabController.addListener(() {
              valueNotifier.value = tabController.index;
            });
          }
          return Scaffold(
            appBar: AppBar(
              title: Stack(
                children: [
                  ValueListenableProvider<int>.value(
                    value: valueNotifier,
                    child: CategoryDropdownWidget(widget._tabBarList),
                  ),
                  Container(
                    margin: const EdgeInsets.only(right: 25),
                    color: Theme.of(context).primaryColor.withOpacity(1),
                    child: TabBar(
                      isScrollable: true,
                      tabs: List.generate(
                        widget._tabBarList.length,
                        (index) => Tab(text: widget._tabBarList[index].tabBarName),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            body: TabBarView(
              children: List.generate(widget._tabBarList.length, (index) => widget._tabBarList[index].tabBarWidget),
            ),
          );
        },
      ),
    );
  }
}

///
/// 自定义下拉框
///
class CategoryDropdownWidget extends StatelessWidget {
  final List<DropDownTabBarItem> _tabBarList;

  CategoryDropdownWidget(this._tabBarList);

  @override
  Widget build(BuildContext context) {
    int currentIndex = Provider.of<int>(context);
    return Align(
      child: Theme(
        data: Theme.of(context).copyWith(
          canvasColor: Theme.of(context).primaryColor,
        ),
        child: DropdownButtonHideUnderline(
            child: DropdownButton(
          elevation: 0,
          value: currentIndex,
          style: Theme.of(context).primaryTextTheme.subhead,
          items: List.generate(_tabBarList.length, (index) {
            var theme = Theme.of(context);
            var subhead = theme.primaryTextTheme.subhead;
            return DropdownMenuItem(
              value: index,
              child: Text(
                _tabBarList[index].tabBarName,
                style: currentIndex == index
                    ? subhead.apply(
                        fontSizeFactor: 1.15,
                        color: theme.brightness == Brightness.light ? Colors.white : theme.accentColor)
                    : subhead.apply(color: subhead.color.withAlpha(200)),
              ),
            );
          }),
          onChanged: (value) {
            DefaultTabController.of(context).animateTo(value);
          },
          isExpanded: true,
          icon: Container(
            child: Icon(
              Icons.keyboard_arrow_down,
              color: Colors.white,
            ),
          ),
        )),
      ),
      alignment: Alignment(1.1, -1),
    );
  }
}
